<template>
  <div class="home">

     <div class="left">
        <div class="title">
            <div @click="router.go(-1)" class="titleItem" style="cursor: pointer; color:#1890FFFF;font-weight: 100;padding: 6px 30px;border: 1px solid #1890FFFF;">返回</div>
        </div>
        <div class="wid-100">
          <div class="content">
                <div class="nnickname">发布人：{{state.detail.pushName}}</div>
                <div class="nnickname" v-if="state.detail.meetName">接单人：{{state.detail.meetName}}</div>
                <div class="relist" v-if="state.detail.reasonlist">
                    <span class="name" v-for="(item) in state.detail.reasonlist"> {{ item.admin_name }}  驳回理由：{{ item.reason }} {{ item.create_time }}</span>
                </div>
               <h4>{{ state.detail.title }}</h4>
              <p>简介：{{ state.detail.synopsis }}</p>
               <p v-html="state.detail.data"></p>
          </div>
          <div class="rih" v-if="state.detail.AllmeetName">
            <div class="ri-title">接单人列表</div>
            <div class="for" v-for="(it1,ind1) in state.detail.AllmeetName" :key="ind1">
              <div class="nickname">{{it1.meetName}}</div>
              <div class="date">{{it1.getTime}}</div>
            </div>
          </div>
        </div>
     </div>

     <div class="right">
        <!--操作面板-->
        <operationPanel :sonData="state.detail" :dataForm="state.dataFrom" @queryclick="queryClick"
        @submitclick="submitClick" @abandonclick="abandonClick" @remove="remove"
        @handlesuccess="handleSuccess" :headers="state.headers"
        ></operationPanel>
       <!--操作面板-->

       <!--完成文件-->
       <complete-file :data="state.detail.finish_file" @downloadfile="downloadFile" @delfile="delFile"></complete-file>
       <!--完成文件-->
       <!--参考资料-->
       <reference-material :data="state.detail.about_file" @downloadfile="downloadFile"></reference-material>
       <!--参考资料-->
     </div>
     <myDialog v-if="state.dialogVisible">
        <div class="myDialog" >
            <div class="dialogItem" v-if="false"></div>
            <div class="queryItem" v-if="state.dialogType===2">
              <div class="head">疑问求助</div>
              <div class="content">
                  <el-input placeholder="请输入求助内容" :rows="6" type="textarea" style="width: 342px; height: 164px;" v-model="state.From.doubt">

                  </el-input>
              </div>
              <div class="foot">
                <el-button type="primary" size="small" @click="addDoubt()">确认</el-button>
                <el-button size="small" @click="state.dialogVisible=false">取消</el-button>
              </div>
            </div>
            <div class="dialogItem" v-if="state.dialogType===3">
              <div class="head">提交任务</div>
              <div class="content">是否确认提交任务？</div>
              <div class="foot">
                <el-button type="primary" size="small" @click="giveUp(2)">确认</el-button>
                <el-button size="small" @click="state.dialogVisible=false">取消</el-button>
              </div>
            </div>
            <div class="dialogItem" v-if="state.dialogType===4" >
              <div class="head">放弃任务</div>
              <div class="content">是否确认放弃任务？</div>
              <div class="foot">
                <el-button type="primary" size="small" @click="giveUp(3)">确认</el-button>
                <el-button size="small" @click="state.dialogVisible=false">取消</el-button>
              </div>
            </div>

        </div>
     </myDialog>

  </div>

</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted,onActivated} from 'vue'
import { useRouter } from 'vue-router'
import myDialog from '../../../components/dialog/myDialog.vue'
import operationPanel from '@/components/task/operationPanel.vue'


import { ElMessage } from 'element-plus'
import ReferenceMaterial from '../../../components/task/referenceMaterial'
import CompleteFile from '../../../components/task/completeFile'
const state = reactive({
  isHelp: false,
  isLogin : false,
  dialogType : 0 ,
  dialogVisible : false,
  detail: '',
  headers: {
    token: localStorage.getItem("token")
  },
  From: {
    doubt: ''
  },
  dataFrom: {
    rec_id: 0
  },
  attc_id: 0,
  rec_id: 0
});
function handleClick(tab, event){
     console.log(tab, event);
};
function handleSizeChange(){

};
function handleCurrentChange(){

};

export default {
  name: 'basicListDetail',
  components: {
    CompleteFile,
    ReferenceMaterial,
    myDialog ,
    operationPanel
  },
  // setup(props,ctx){
  setup(props,{emit}){
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties
    const router = useRouter();
    const id = router.currentRoute.value.query.id;
    state.rec_id = router.currentRoute.value.query.rec_id
    state.dataFrom.rec_id = router.currentRoute.value.query.rec_id
    function goSeekHelpDetail (){
      router.push({
        name:'basicList',
        query:{
          id: id
        }
      })
    };
    function uploadClick(){
        state.dialogVisible = true
    }
    function queryClick(){
        state.dialogVisible = true
        state.dialogType = 2
    }
    function submitClick(){
        state.dialogVisible = true
        state.dialogType = 3
    }
    function abandonClick(){
        state.dialogVisible = true
        state.dialogType = 4
    }
    function handleClose(){
    }
    const getDetail = () => {
      localStorage.setItem('isDetail',1)
      let is_file = localStorage.getItem('is_file');
      _this.$request({
          url: "?s=Learn.Task.TaskRow",
          params: {task_id:id,rec_id:state.rec_id,is_file:is_file},
        })
        .then((res) => {
            state.detail = res.data
            state.detail.data = state.detail.data.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
            state.dataFrom.rec_id = state.detail.rec_id
        })
    }
    const addDoubt = () => {
      _this.$request({
          url: "?s=Learn.Task.PushHelp",
          params: {taskRec_id:id,data:state.From.doubt},
        })
          .then((res) => {
            if(res.ret === 200){
              ElMessage.success({
                message: '求助成功',
                type: 'success'
              })
              setTimeout(function () {
                state.dialogVisible=false
              },1000)

            }else{
              ElMessage.error(res.data.msg);
            }
          })
    }
    const addPost = () => {

    }
    //放弃任务
    const giveUp = (status) => {
      _this.$request({
          url: "?s=Learn.Task.UpRecTask",
          params: {task_id:state.dataFrom.rec_id,status:status},
        })
        .then((res) => {
          if(res.ret === 200){
            ElMessage.success({
              message: '操作成功',
              type: 'success'
            })
            setTimeout(function () {
              state.dialogVisible = false
              if(status == 2){
                  state.detail.recStatus = 2
              }else{
                  state.detail.recStatus = 0
              }

            },1000)
          }else{
            ElMessage.error(res.msg);
          }
       })
    }
    //文件上传成功后
    const handleSuccess = (res) => {
      if(res.ret == 200){
          //删除上一个文件
          deleteF(state.attc_id)
          console.log(res)
          state.attc_id = res.data.attc_id
          //重置数据
          getDetail();
      }else{
        ElMessage.error(res.msg);
      }

    }
    //下载文件
    const downloadFile = (res) => {
      console.log(res)
      if(res == ''){
          ElMessage.error('文件不存在');
      }else{
          window.location.href = res
      }
    }
    // 删除文件
    const delFile = (id) => {
      if(state.detail.recStatus!=1){
          ElMessage.error('该任务已提交，不能在删除该哦');
          return false
      }
      _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$request({
          url: "?s=Learn.Admin.Remove_file",
          params: {attc_id:id},
        }).then((res) => {
          if(res.ret == 200){
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
            getDetail();
          }else{
            ElMessage.error(res.msg);
          }
        })

      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    // 普通删除文件
    const deleteF = (attc_id) => {
        if(attc_id > 0){
          ctx.$request({
            url: "?s=Learn.Admin.Remove_file",
            params: {attc_id:attc_id},
          }).then((res) => {
              console.log(res)
          })
        }
    }
    // 删除文件回调
    const remove = (file) => {
        //删除上一个文件
        deleteF(state.attc_id)
    }
    onMounted(getDetail)
    return{
      state,
      handleClick,
      getDetail,
      router,
      goSeekHelpDetail,
      handleSizeChange,
      handleCurrentChange,
      uploadClick,
      queryClick,
      submitClick,
      abandonClick,
      handleClose,
      id,
      addDoubt,
      addPost,
      giveUp,
      handleSuccess,
      downloadFile,
      delFile,
      remove

    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-upload {
    display: block !important;
  }
/deep/ .el-input__prefix{
  color: #359EFFFF;
  font-size: 16px;
}
.name {
  font-size: 12px;
  color: red;
}
.wid-100 {
    display: flex;
    width: 100%;
}
.rih {
  padding: 12px 20px 10px 20px;
  border-left: 1px solid #f9f9f9;
  width: 30%;

}
.for {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ri-title {
  margin-bottom: 34px;
  font-weight: 600;
}

.nnickname {
  color: #409eff;
  margin-bottom: 10px;
}
.myDialog{

  .queryItem{
    width: 402px;
    background-color: #fff;

    .head{
      height: 38px;
      background-color: #1890FFFF;
      color: #fff;
      padding-left: 18px;
      display: flex;
      align-items: center;
    }
    .content{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 180px;
      color: #111111FF;

    }
    .foot{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 42px;
      margin-right: 30px;
    }
  }

  .dialogItem{

      width: 274px;
      background-color: #fff;

      .head{
        height: 38px;
        background-color: #1890FFFF;
        color: #fff;
        padding-left: 18px;
        display: flex;
        align-items: center;
      }
      .content{
        display: grid;
        place-items: center;
        height: 115px;
        color: #111111FF;
      }
      .foot{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 42px;
        border-top: 1px solid #E8E8E8;
      }
  }
}


.home {
  display: flex;
  width: 100%;
  height:  calc(calc(100vh - 64px) - 40px - 70px);
   .left {
      flex: 2;
      background-color: #fff;
      height: 100%;
      margin-right: 24px;
      .title {
        padding-left: 30px;
        display: flex;
        border-bottom: 1px solid #E9E9E9;
        box-sizing: border-box;
        align-items: center;
        height: 55px;
      }

      .content {
        padding-left: 23px;
        padding-top: 12px;
        display: flex;
        flex-direction: column;
        min-height: calc(calc(100vh - 64px) - 40px - 70px - 55px);
        background: white;
        width: 70%;
        h4 {
          color: #000000FF;
          font-size: 16px;
        }
        p {
          color: #000000A6;
          font-size: 14px;
        }

      }
   }

   .right {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;



   }
}
</style>
